<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>无忧微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>

	<body>
		<div class="m-project">
			<div class="hd f-pr">
				<h3 class="title">
					<span v-text="name"></span>
					<i class="icon-angle-left f-fl" v-on:tap="back()"></i>
				</h3>
				<div class="rate-box">
					<p class="high-color" v-html="rate+'<span>%</span>'"></p>
					<p>预期收益</p>
				</div>
				<div class="tabs f-pa">
					<p>
						<span v-text="dead_line+date_type"></span>
						<span>期限</span>
					</p>
					<p>
						<span v-text="amount"></span>
						<span>项目总额(元)</span>
					</p>
					<p>
						<span v-text="bid_count"></span>
						<span>已购笔数</span>
					</p>
				</div>
			</div>
			<div class="percent-box">
				<div class="detail">
					<p class="percent-bar f-pr">
						<span class="child f-pa" :style="{width: percent + '%'}"></span>
					</p>
					<p class="info clearfix">
						<span class="f-fl">购买进度<span class="color" v-text="percent+'%'"></span></span>
						<span class="f-fr">剩余可投<span class="color" v-text="surplus_amount"></span>{{surplus_unit}}</span>
					</p>
				</div>
			</div>
			<div class="project-tabs">
				<a href="javascript:;" class="tab">
					<img src="../images/project-icon-1.png">
					<span>利率高</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../images/project-icon-2.png">
					<span>车辆抵押</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../images/project-icon-3.png">
					<span>无限购</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../images/project-icon-4.png">
					<span>安全保障</span>
				</a>
			</div>
			<ul class="info-list">
				<!--<li>
					<img src="../images/project-icon-5.png">
					<span>常见问题</span>
					<i class="icon-angle-right f-fr"></i>
				</li>-->
				<li data-id="1">
					<img src="../images/project-icon-10.png">
					<span>借款明细</span>
					<i class="icon-angle-right f-fr"></i>
				</li>
				<li data-id="2">
					<img src="../images/project-icon-11.png">
					<span>借款人</span>
					<i class="icon-angle-right f-fr"></i>
				</li>
				<li data-id="3">
					<img src="../images/project-icon-12.png">
					<span>投标记录</span>
					<i class="icon-angle-right f-fr"></i>
				</li>
				<li>
					<img src="../images/project-icon-6.png">
					<span>项目历程</span>
					<i class="icon-angle-right f-fr"></i>
				</li>
				<li>
					<img src="../images/project-icon-7.png">
					<span>还款方式</span>
					<span class="f-fr small" v-text="credit_type"></span>
				</li>
			</ul>
			<div class="invest-box" v-bind:class="{ disable: percent>=100 }">
				<span class="calculation f-fl" id="count"><img src="../images/project-icon-9.png"></span>
				<a href="javascript:;" class="invest-btn">立即投资</a>
			</div>

			<div class="overlay">
				<div class="modal modal-cal">
					<h3 class="f-pr">
						<span>收益计算器</span>
						<a class="close f-pa" id="close"></a>
					</h3>
					<div class="cal clearfix">
						<p class="f-fl">
							<span v-text="total">0.00</span>
							<span>预计总收益(元)</span>
						</p>
						<p class="f-fr">
							<span v-text="dead_line">2</span>
							<span>投资期限({{date_type}})</span>
						</p>
					</div>
					<div class="ipt-box f-pr">
						<span>投资金额：</span>
						<input type="tel" class="f-pa amount" placeholder="请输入投资金额">
						<i class="close-icon f-pa"></i>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '.m-project',
				data: {
					amount: '0.00',
					bid_count: 0,
					credit_type: '',
					date_type: '',
					dead_line: 10,
					name: '',
					percent: 0,
					rate: '',
					surplus_amount: '0.00',
					surplus: '0.00',
					surplus_unit: '元',
					unit: '元',
					total: '0.00'
				},
				methods: {
					back: function() {
						mui.back();
					}
				}
			});

			var page = {
				info: function(credit) {
					mui.ajax(base + 'credit/detail', {
						type: 'get',
						data: {
							'id': credit
						},
						dataType: 'json',
						headers: sign(md5),
						success: function(data) {
							vm.amount = data.amount;
							vm.bid_count = data.bid_count;
							vm.credit_type = data.credit_type;
							vm.date_type = data.date_type;
							vm.dead_line = data.dead_line;
							vm.name = data.name;
							vm.percent = data.percent;
							vm.rate = data.rate;
							vm.surplus_amount = data.surplus_amount;
							vm.surplus = data.surplus;
							vm.surplus_unit = data.surplus_unit;
							vm.unit = data.unit;
						},
						error: function(data) {
							console.error(JSON.stringify(data));
						}
					});
				}
			};

			mui.plusReady(function() {
				var webview = plus.webview.currentWebview();
				$('.info-list li:nth-child(1), .info-list li:nth-child(2), .info-list li:nth-child(3)').on('tap', function() {
					var data_id = $(this).attr('data-id');
					mui.openWindow({
						url: 'projectdetail.html',
						extras: {
							data_id: data_id,
							credit: webview.credit
						},
						show: {
							aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
							event: "loaded"
						}
					});
				});

				$('.info-list li:nth-child(4)').on('tap', function() {
					mui.openWindow({
						url: 'process.html',
						extras: {
							credit: webview.credit
						},
						show: {
							aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
							event: "loaded"
						}
					});
				});

				$('.invest-btn').on('tap', function() {
					var id = plus.storage.getItem('user_id');
					if(id) {
						mui.ajax(base + 'credit/status', {
							type: 'post',
							data: {
								'credit': webview.credit
							},
							dataType: 'json',
							headers: sign(md5),
							success: function(data) {
								console.log('当前标状态：' + JSON.stringify(data));
								if(data.result) {
									mui.openWindow({
										url: 'bid.html',
										extras: {
											name: vm.name,
											rate: vm.rate,
											dead_line: vm.dead_line,
											date_type: vm.date_type,
											bid_count: vm.bid_count,
											surplus_amount: vm.surplus,
											credit: webview.credit
										},
										show: {
											aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
											event: "loaded"
										}
									})
								} else {
									mui.toast(data.message);
								}
							},
							error: function(data) {
								console.error(JSON.stringify(data));
							}
						});
					} else {
						mui.openWindow({
							url: 'passport.html',
							show: {
								aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
								event: "loaded"
							}
						});
					}
				});

				var $pop = $(".overlay");

				function modalHidden($ele) {
					$ele.removeClass("modal-in");
					$ele.one("transitionend", function() {
						$ele.css("display", "none");
						$pop.removeClass("active");
					});
				}

				$("#count").on("tap", function() {
					$pop.addClass("active");
					var $modal = $(".modal");
					$modal.css("display", "block");
					$modal.addClass("modal-in");

					$("#close").on("tap", function(e) {
						modalHidden($modal);
						e.stopPropagation();
					});

					$(".overlay").on("tap", function(e) {
						if(e.target.classList.contains("overlay")) {
							modalHidden($modal);
						}
					});
				});

				$('.close-icon').on('tap', function() {
					vm.total = '0.00';
					$(this).siblings('input').val('');
					$(this).hide();
				});

				$('.amount').on('keyup', function() {
					var value = $(this).val();
					if(value) {
						$(this).siblings('.close-icon').show();
						mui.ajax(base + 'credit/calculator', {
							type: 'get',
							data: {
								'credit': webview.credit,
								'amount': value
							},
							dataType: 'json',
							headers: sign(md5),
							success: function(data) {
								if(data.result) {
									vm.total = data.total;
								}
							},
							error: function() {
								console.error('error');
							}
						});
					} else {
						$(this).siblings('.close-icon').hide();
					}
				});
				
				//退出登录  --自定义事件
				window.addEventListener('bidSuccess', function() {
					console.log('执行投标成功事件');
					page.info(webview.credit);
				}, false);
				return page.info(webview.credit);
			});
		</script>
	</body>

</html>